<template>
<div>
    <!-- 1.单元素过渡效果实现 -->
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- 想让一刷新就开始动画效果，添加appear为true，前面不加:会被解析成字符串"true"，控制台报错，可以直接简写appear -->
    <!-- <transition name="hello" :appear="true">
        <h1 v-show="isShow">你好啊！</h1>
    </transition> -->

    <!-- 2.多个元素使用同一个过渡效果，使用transition-group，同时指定key -->
    <!-- <transition-group name="hello" :appear="true">
        <h1 v-show="isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">TOM！</h1>
    </transition-group> -->

    <!-- 3.使用第三方动画库，2.name指定名字，要用第三方库 -->
    <!-- enter-active-class配置进入的动画，leave-active-class配置离开的动画 -->
    <transition-group 
        :appear="true"
        name="animate__animated animate__bounce" 
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp">   
        <h1 v-show="isShow" key="1">你好啊！</h1>
        <h1 v-show="isShow" key="2">TOM！</h1>
    </transition-group>
</div>
</template>

<script>
// 1.引入动画样式库
import 'animate.css'
export default {
    name:'VueTest3',
    data() {
        return {
            isShow:true
        };
    }
}
</script>
<style scoped>
    h1{
        background-color: orange;
    }


</style>